import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

class DioDome extends StatefulWidget {
  const DioDome({super.key});

  @override
  State<DioDome> createState() => _DioDomeState();
}

class _DioDomeState extends State<DioDome> {
  List _channels = [];

  @override
  void initState() {
    super.initState();
    _getData();
  }

  _getData() async {
    Dio dio = Dio();
    final response = await dio.get('https://geek.itheima.net/v1_0/channels');
    setState(() {
      //必须加setState去响应UI更新，因为这个方法是异步的会先走下面
      _channels = response.data['data']['channels'];
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 4,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
      ),
      itemBuilder: (context, index) {
        return Container(
          alignment: Alignment.center,
          color: Colors.pink,
          child: Text(
            _channels[index]['name'],
            style: const TextStyle(color: Colors.white),
          ),
        );
      },
      itemCount: _channels.length,
    );
  }
}
